使用時機

• useState：邏輯簡單時做狀態管理。搭配展開語法、filter、map可分別實作增刪改
• useReducer：1. 邏輯複雜時做狀態管理（譬如增刪改皆能操作的購物車）；2. 當下一個狀態相依於上一個狀態時；3. 更新邏輯想複用於多個組件時
• useContext：適合做主題切換、讀取帳戶資訊、i18n，亦可做為路由
• useRef：通常用來操作DOM，或結合useEffect儲存上一個Props/State的值
• useEffect：當Props/State改變時，會觸發包含在其中的動作（副作用）。通常用來和React之外的系統同步，如非同步請求fetch；有時會拿來寫定時器；依賴值設定成空陣列時，可以處理只有初始化當下的邏輯（相當於onMounted）

注意事項

• Export是具名導出，導入時要搭配大括號，不像默認導出的Default彈性
• {　JS　}在JSX中只能作為文本或屬性
• Props的默認值不能用0或null，和useState、createContext不一樣
• Setter裡不能寫+=，要使用Immer才能處理mutation
• 切換布林時要用setState(!state)
• 如果兩個State總是連動，在State一起更新；如果兩個組件的State總是連動，使用狀態提升；如果兩個邏輯總是連動，可用自訂Hook
• 不要在State裡用Props
• 如果UI裡要列出「所選擇元素」，請select ID而非該元素本身
• key值要標示在父組件裡，因為key值不是全域的
• 在事件處理函數或Effect裡讀取ref，才不會造成副作用
• 在組件使用ref屬性只會得到null值，除非使用forwardRef
• ref和setter不用放進依賴陣列，因為每輪渲染都是相同的
• 不要把Effect Event傳給其他組件或Hook